<template>
  <div class="w-h-100">
    <el-col :span="24" style="height: 100%;background-color: #304156">
      <el-menu
          class="el-menu-vertical-demo"
          background-color="#304156"
          text-color="#fff"
          router
          @select="activeClick"
          :default-active="activeValue"
          active-text-color="#409EFF">
        <div class="box2"><img alt="图片加载不出来的文字提示" src="@/assets/xtuIcon.png" class="img"> 智慧校园管理系统
        </div>
        <el-menu-item v-for="(item,index) in menuArr" :key="index" :index="item.path">
          <i :class="item.icon"></i>{{ item.name }}
        </el-menu-item>
      </el-menu>
    </el-col>

  </div>
</template>

<script>

export default {
  name: 'LeftNav',
  props: ["topValue"],
  data() {
    return {
      activeValue: "/home/index",

      //导航路由menu
      /*index数组的索引--数组自带的可以用 ，v-for遍历后都是item，需要用:key="index",让每一个item都有唯一标识*/
      menuArr: [
        {path: "/home/index", name: "首页", icon: "el-icon-orange",id:'0'},
        {path: "/home/student", name: "学生管理", icon: "el-icon-user",},
        {path: "/home/teacher", name: "教师管理", icon: "el-icon-s-custom",},
        {path: "/home/class", name: "班级管理", icon: "el-icon-price-tag",},
        {path: "/home/grade", name: "年级管理", icon: "el-icon-date",},
        {path: "/home/vxeTableStudent", name: "echarts统计", icon: "el-icon-user",},
        {path: "/home/count", name: "vxeTable学生", icon: "el-icon-user",},
      ],

    }
  },
  methods: {
    //激活顶部导航Top的tag
    activeClick(path) {
      const menuObj = this.menuArr.filter(tag => tag.path === path)[0]
      //子组件对父组件穿参数，实现子-->父的通信
      this.$emit("tagClick", menuObj)
    },

  },
  mounted() {
    //监听路由变化动态更新左侧导航栏
    if (this.menuArr.map(item => item.path).indexOf(this.$route.path) !== -1) {
      // this.activeValue = this.$route.path
    }
    console.log("侧边导航栏挂载完成。。。")
    // setTimeout(() => {
    //   this.$bus.$emit("test", 123)
    // }, 2000)
    this.$bus.$on("gaoliang",glpath => {
      this.activeValue = glpath
      console.log("接收Top来的path",glpath)
    })

  },

  watch: {
    topValue(newValue, oldValue) {
      // debugger
      this.activeValue = newValue.path
      console.log("高亮", this.activeValue)
    }
  },
  beforeDestroy() {
    this.this.$bus.$off("gaoliang")
  }

}
</script>

<style scoped>
.box2 {
  color: #FFFFFFFF;
  background-color: #2B2F3A;
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img {
  width: 60px;
  height: 60px;
  margin-right: 10px;
  font-weight: bold;
}
</style>
